<template>
  <div>
    <v-card>
      <v-card-title>
        研究兴趣
      </v-card-title>
      <v-divider/>
      <!--      <h3 class="text-center mt-12">No Data Available.</h3>-->
      <div v-show="interests.length > 0" id="interest" style="width: 100%; height:450px;"></div>
      <v-card-text v-show="interests.length === 0"><h3 class="text-center mt-6">No Data Available.</h3></v-card-text>
    </v-card>

    <v-card class="mt-6">
      <v-card-title>
        作者统计
      </v-card-title>
      <v-card-text v-for="n in 6" :key="n">{{radar.indicator[n].name}} : {{radar.statics[n]}} 👉 {{radar.value[n]}}/1</v-card-text>
      <v-divider/>
      <div id="radar" style="height: 300px; width: 80%; margin: auto"></div>
    </v-card>
    <v-card class="mt-6">
      <v-card-title>数据免责声明</v-card-title>
      <v-card-text>
        页面数据均来自互联网公开来源、合作出版商和通过AI技术自动分析结果，我们不对页面数据的有效性、准确性、正确性、可靠性、完整性和及时性做出任何承诺和保证。
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
export default {
  name: "ProfileNetwork",
  // components: {Network}
  props: ['interests', 'radar'],
  data () {
    return {
      myChart: [],
    }
  },
  methods: {
    genInterest(){
      var myChart1 = this.$echarts.init(document.getElementById('interest'));
      this.myChart.push(myChart1);
      // 绘制图表
      const that = this;
      var option = {
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '研究方向',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: that.interests
          }
        ]
      };
      myChart1.setOption(option);
    },
    genNetwork(){
      var myChart2 = this.$echarts.init(document.getElementById('radar'));
      this.myChart.push(myChart2)
      var option;
      // 绘制图表
      const that = this;
      setTimeout(() => {
            window.onresize = function () {
              console.log(123)
              that.myChart[0].resize()
              that.myChart[1].resize()
            }
          },
          500
      )
      option = {
        radar: {
          shape: 'circle',
          indicator: that.radar.indicator
        },
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            areaStyle: {},
            data: [
              {
                value: that.radar.value,
                name: 'Budget vs spending',
              },
            ]
          }
        ]
      };
      myChart2.setOption(option);
    }
  },
  mounted() {
    this.genInterest();
    this.genNetwork();
  }
}

</script>

<style scoped>

</style>